<template>
  <div>
    <el-dialog
      :ntitle="ntitle"
      :visible.sync="visible"
      width="70%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-ncontent">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="公告标题">
            <el-input v-model="form.ntitle" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="公告类型">
            <el-select
              :disabled="index === 1 || type !== 0"
              style="width: 200px"
              v-model="form.type"
              placeholder="全部"
              @change="selectChanged"
              clearable
            >
              <el-option value="1" label="系统公告" />
              <el-option value="2" label="招标公告" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否置顶">
            <el-radio v-model="form.weight" label="1">置顶</el-radio>
            <el-radio v-model="form.weight" label="0">不置顶</el-radio>
          </el-form-item>
          <el-form-item label="内容">
            <quill-editor
              ref="myQuillEditor"
              v-model="form.ncontent"
              :options="editorOption"
              class="editor"
              @change="onEditorChange($event)"
            ></quill-editor>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    ntitle: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
    type: {
      type: Number,
      default: 0,
    },
    announcementInfo: {
      type: Object,
      default: {},
    },
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      form: {
        id: "",
        ntitle: "",
        ncontent: "",
        type: this.type ===0 ? "" : this.type+"",
        publisher: this.$store.getters.accountId,
        modifier: this.$store.getters.accountId,
        createTime: "",
        updateTime: "",
        viewCounts: 0,
        weight: "0",
      },
      editorOption: {
        theme: "snow",
        placeholder: "请输入正文",
      },
    };
  },
  methods: {
    open() {
      console.log(this.announcementInfo);
      if (this.index === 1) {
        this.form = {
          ntitle: this.announcementInfo.ntitle,
          ncontent: this.announcementInfo.ncontent,
          type: this.announcementInfo.type,
          id: this.announcementInfo.id,
          type: this.announcementInfo.type + "",
          publisher: this.announcementInfo.publisher.accountId,
          modifier: this.announcementInfo.modifier.accountId,
          createTime: this.announcementInfo.createTime,
          updateTime: this.announcementInfo.updateTime,
          viewCounts: this.announcementInfo.viewCounts,
          weight: this.announcementInfo.weight+"",
        };
        console.log(this.form);
      }
    },
    selectChanged(val) {
      console.log(val);
      this.form.type = val;
    },
    onEditorChange({ html, text }) {
      // console.log(html)
      // console.log(text)
      this.form.ncontent = html;
      //this.form.ncontent = text;
    },
    initForm() {
      this.form = {
        id: "",
        ntitle: "",
        ncontent: "",
        type: this.type + "",
        publisher: "",
        modifier: "",
        createTime: "",
        updateTime: "",
        viewCounts: 0,
        weight: "0",
      };
    },
    cancel() {
      this.$emit("cancel");
      this.initForm();
    },
    ok() {
      this.form.modifier = this.$store.getters.accountId;
      const formData = {
        announcement: this.form,
        accountId: this.$store.getters.accountId,
      };
      this.$emit("ok", formData);
      this.initForm();
    },
  },
};
</script>
